<template>
  <section class="faq-section">
    <div class="container">
      <div class="section-header">
        <h2>常见问题</h2>
        <p>解答您最关心的问题</p>
      </div>
      
      <div class="faq-grid">
        <div class="faq-item" v-for="(faq, index) in faqs" :key="index">
          <div class="faq-question" @click="toggleFaq(index)">
            <h3>{{ faq.question }}</h3>
            <i :class="['fas', 'fa-chevron-down', { 'rotated': faq.isOpen }]"></i>
          </div>
          <div class="faq-answer" :class="{ 'open': faq.isOpen }">
            <p>{{ faq.answer }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'FAQ',
  data() {
    return {
      faqs: [
        {
          question: '智索真源与传统外包平台有什么区别？',
          answer: '我们不是传统的外包平台。我们通过AI智能匹配、区块链存证、技术股激励等创新模式，构建了一个让"信任自动生成、合作更高效、人才持续成长"的智能协作生态。',
          isOpen: false
        },
        {
          question: '技术股模式是如何运作的？',
          answer: '企业可以选择"技术股"或"股权+现金"的混合形式发布任务。我们的AI系统会基于企业当前估值、任务难度与市场行情智能测算合理的股份比例，让企业能以更灵活的方式吸引顶尖人才。',
          isOpen: false
        },
        {
          question: '平台如何保证项目质量？',
          answer: '我们通过区块链存证确保整个过程的可信。从身份认证到项目执行再到结果验收，每个环节都会留下不可篡改的链上记录。配合三维信用模型和实时风控系统，确保项目质量。',
          isOpen: false
        },
        {
          question: '大学生如何通过平台获得成长？',
          answer: '大学生可以在校园里就接触真实企业任务，完成后获得AI认证的"能力勋章"和"成长曲线"，这些数据可作为他们未来求职的"区块链履历"，实现从学习者到实践者的转变。',
          isOpen: false
        },
        {
          question: '平台收费模式是什么？',
          answer: '我们主要不靠抽成，而是通过B端企业付费（AI预算、智能风控与人才管理模块）、C端用户增值服务（能力认证包、AI成长报告）、数据生态授权等方式实现盈利。',
          isOpen: false
        },
        {
          question: '如何确保平台的安全性？',
          answer: '我们采用区块链技术确保数据不可篡改，配合AI风控系统实时监控异常情况。所有用户身份都经过严格认证，项目执行过程全程可追溯，确保平台安全可靠。',
          isOpen: false
        }
      ]
    }
  },
  methods: {
    toggleFaq(index) {
      this.faqs[index].isOpen = !this.faqs[index].isOpen
    }
  }
}
</script>

<style scoped>
.faq-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.faq-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(6, 182, 212, 0.05) 50%, rgba(139, 92, 246, 0.05) 100%);
  pointer-events: none;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

.section-header h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-header p {
  font-size: 1.1rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

.faq-grid {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.faq-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 15px;
  margin-bottom: 1rem;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.1);
}

.faq-question {
  padding: 1.5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.faq-question:hover {
  background: rgba(59, 130, 246, 0.1);
}

.faq-question h3 {
  font-size: 1.1rem;
  color: white;
  margin: 0;
  flex: 1;
  padding-right: 1rem;
}

.faq-question i {
  color: #3b82f6;
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.faq-question i.rotated {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-answer.open {
  max-height: 200px;
}

.faq-answer p {
  padding: 0 1.5rem 1.5rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .faq-question {
    padding: 1rem;
  }
  
  .faq-question h3 {
    font-size: 1rem;
  }
  
  .faq-answer p {
    padding: 0 1rem 1rem;
  }
}
</style>

